<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../0_assets/vue2.js"></script>
</head>

<body>
    <div class="app">
        <!-- 
            v-html 
                有些时候会有一些需求，后端会给我们返回一些html语句，我们把他渲染到页面上，这个时候就可以使用v-html指令
                不过要注意，v-html是官方不太推荐使用的指令，因为它会有遭到不法分子csrf攻击的风险
        -->
        <div v-html="htmlCode"></div>
        <hr>

        <!-- 
            v-once
                元素和组件只会渲染一次，你的修改将会失效.
                使用的时候无需赋值，直接写上去就行
         -->
        <p v-once>{{ message }}</p>
        <button @click="message=111">改变无效</button>
        <hr>

        <!-- 
            v-bind
                绑定动态的数据，绑定一个或多个属性值，向另一个组件传递props值
                使用的时候都是用语法糖，就是直接一个冒号即可
          -->
        <img :src="imgSrc" width="300">
        <hr>

        <!-- 
            v-on
                监听事件
           -->
        <p>{{ age }}</p>
        <button @click="age++">点我+1</button>
        <hr>

        <!-- 
                v-for
                    循环渲染, 这个就不用多说啥了吧
            -->
        <ul>
            <li v-for="data in dataList" :key="data.id">{{ data.name }}</li>
        </ul>
        <hr>

        <!-- 
                v-if
                    条件渲染指令，用法不再赘述
             -->
        <div v-if="age>=18">成年啦</div>
        <div v-else>未成年哦</div>
        <hr>

        <!-- 
                v-show
              -->
        <div v-show="age>=18">芜湖，成年啦</div>
        <hr v-show="age>=18">

        <!-- 
                v-model
                    实现表达元素和数据的双向绑定
               -->
        <h4>看看你输入的: {{text}}</h4>
        <input type="text" v-model="text" />
        <hr>
    </div>
    <script>
        let app = new Vue({
            el: '.app',
            data() {
                return {
                    htmlCode: '<h1>v-html：我是后端返回的html语句</h1>',
                    message: 'v-once测试',
                    imgSrc: 'https://img2.baidu.com/it/u=2537370952,3446004972&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
                    age: 0,
                    dataList: [
                        {
                            name: '张三',
                            id: '001'
                        },
                        {
                            name: '李四',
                            id: '002'
                        },
                        {
                            name: '王五',
                            id: '003'
                        },
                        {
                            name: '狗子',
                            id: '004'
                        },
                    ],
                    text: ''
                }
            }
        })
    </script>
</body>

</html>